<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/upload/css/webuploader.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择大文件</div>
        <span>
            上传的文件目录：<input type="text" value="data" id="pathText"/>
        </span>
        <br>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
</div>
<!--引入JS-->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/upload/js/webuploader.min.js"></script>
<script>
    var $btn = $('#ctlBtn');
    var $thelist = $('#thelist');
    // HOOK 这个必须要再uploader实例化前面
    WebUploader.Uploader.register({
        'before-send-file': 'beforeSendFile',
        'before-send': 'beforeSend'
    }, {
        beforeSendFile: function (file) {
            var task = new $.Deferred();
            // 根据文件内容来查询MD5
                uploader.md5File(file).progress(function (percentage) {   // 及时显示进度
                    console.log('计算md5进度:', percentage);
                    //getProgressBar(file, percentage, "MD5", "MD5");
                }).then(function (val) {
                    file.md5 = val;
                    // 进行md5判断
                    $.post("${request.contextPath}/checkFileMd5",
                    {
                        path: $("#pathText").val(),
                        md5: file.md5,
                        name: file.name
                    },
                        function (data) {
                            console.log(data);
                            task.resolve();
                                if (data.code==200) {
                                    // 忽略上传过程，直接标识上传成功；
                                    console.log("闪传")
                                    uploader.skipFile(file);
                                }
                                else if (data.code == 206) {
                                    // 部分已经上传到服务器了，但是差几个模块。
                                    file.missChunks = data.missChunks;
                                }
                               else  if (data.code == 404){
                                    // 文件不存在，那就正常流程
                                    console.log("直接上传")
                            }

                        });

                });
                return $.when(task);
        },
        beforeSend: function (block) {
            var task = new $.Deferred();
            var file = block.file;
            var missChunks = file.missChunks;
            var blockChunk = block.chunk;
            console.log("当前分块号：" + blockChunk);
            if (missChunks !== null && missChunks !== undefined && missChunks !== '') {
                console.log("还没上传的分片号有:" + missChunks);
                var flag = true;
                for (var i = 0; i < missChunks.length; i++) {
                    if (blockChunk == missChunks[i]) {
                        console.log(file.name + "->分块号：" + blockChunk + ":还没上传，现在继续上传。");
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    task.reject();
                } else {
                    task.resolve();
                }
            } else {
                task.resolve();
            }
            return $.when(task);
        }
    });
    // 实例化
    var uploader = WebUploader.create({
        pick: {
            id: '#picker',
            label: '点击选择文件'
        },
        formData: {
            md5: '',
            chunkSize: 2 * 1024 * 1024,
                path: $("#pathText").val()
            },
            swf: '${request.contextPath}/upload/js/Uploader.swf',
        chunked: true,
        chunkSize: 2 * 1024 * 1024, // 字节 2M分块
        threads: 5,
        server: '${request.contextPath}/upload',
        auto: false,
        // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
        disableGlobalDnd: true,
        fileNumLimit: 1,
        fileSizeLimit: 50 * 1024 * 1024 * 1024,    // 200 M
        fileSingleSizeLimit: 50 * 1024 * 1024 * 1024    // 50 M
    });
    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
        //  console.log("fileQueued");
        $thelist.append('<div id="' + file.id + '" class="item">' +
            '<h4 class="info" style="cursor:pointer">' + file.name + '</h4>' +
            '<p class="state">等待上传...</p>' +
            '</div>');
    });
    // 上传中
    uploader.on('uploadProgress', function (file, percentage) {
        getProgressBar(file, percentage, "FILE", "上传进度");
    });
    // 文件上传
    $btn.on('click', function () {
        //  console.log("上传...");
        uploader.upload();
        //  console.log("上传成功");
    });
    /**
     *  生成进度条封装方法
     * @param file 文件
     * @param percentage 进度值
     * @param id_Prefix id前缀
     * @param titleName 标题名
     */
    function getProgressBar(file, percentage, id_Prefix, titleName) {
        var $li = $('#' + file.id), $percent = $li.find('#' + id_Prefix + '-progress-bar');
        // 避免重复创建
        if (!$percent.length) {
            $percent = $('<div id="' + id_Prefix + '-progress" class="progress progress-striped active">' +
                '<div id="' + id_Prefix + '-progress-bar" class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
                '</div>'
            ).appendTo($li).find('#' + id_Prefix + '-progress-bar');
        }
        var progressPercentage = percentage * 100 + '%';
        $percent.css('width', progressPercentage);
        $percent.html(titleName + ':' + progressPercentage);
    }
</script>
</body>
</html>